<template>
    <div class="event">
        <div class="row">
            <div class="col-md-12">
                <p class="title">
                    <span>
                        <em></em>
                    </span>
                    <span>基本信息</span>
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                </p>
            </div>
        </div>
        <div class="row content">
            <div class="col-md-1">
                责任部门：
            </div>
            <div class="col-md-5">
                {{formList.orderDept}}
            </div>
            <div class="col-md-1">
                事件来源：
            </div>
            <div class="col-md-5">
                {{formList.orderOrigin}}
            </div>
        </div>
        <div class="row content">
            <div class="col-md-1" v-if="formList.orderStatus==0">
                
            </div>
            <div class="col-md-1" v-if="formList.orderStatus==1">
                确认人：
            </div>
            <div class="col-md-1" v-if="formList.orderStatus==2">
                处理人：
            </div>
            <div class="col-md-1" v-if="formList.orderStatus==3">
                审核人：
            </div>
            <div class="col-md-1" v-if="formList.orderStatus==4">

            </div>
            <div class="col-md-1" v-if="formList.orderStatus==5">
                责任人：
            </div>
            <div class="col-md-5" v-if="formList.orderStatus==4">
            </div>
            <div class="col-md-5" v-if="formList.orderStatus!=4">
                {{formList.sysPersonName}}
            </div>
            <div class="col-md-1">
                联系电话：
            </div>
            <div class="col-md-5">
                {{formList.orderPhone}}
            </div>
        </div>
        <div class="row content">
            <div class="col-md-1">
                事件类别：
            </div>
            <div class="col-md-5">
                {{formList.orderType}}
            </div>
            <div class="col-md-1">
                联系人姓名：
            </div>
            <div class="col-md-5">
                {{formList.contacts}}
            </div>

        </div>
        <div class="row content">
            <div class="col-md-1">
                事件等级：
            </div>
            <div class="col-md-5">
                {{formList.orderLevel}}
            </div>
            <div class="col-md-1">
                片区：
            </div>
            <div class="col-md-5">
                {{formList.orderArea}}
            </div>
        </div>
        <div class="row content">
            <div class="col-md-1">
                处理时限：
            </div>
            <div class="col-md-5">
                {{formList.orderTimelimit}}
            </div>
            <div class="col-md-1">
                位置：
            </div>
            <div class="col-md-5">
                X:{{formList.orderX}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Y:{{formList.orderY}}
            </div>
        </div>
        <div class="row content">
            <div class="col-md-1">
                事件描述：
            </div>
            <div class="col-md-5">
                <span class="c-span2">{{formList.orderDesc}}</span>
            </div>
            <div class="col-md-1">
                管线：
            </div>
            <div class="col-md-5">
                {{formList.orderPipeid}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="title">
                    <span>
                        <em></em>
                    </span>
                    <span>现场照片</span>
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                </p>
            </div>
        </div>
        <div class="row photo">
            <div class="col-md-1 col-md-offset-1" v-for="item in (formList.orderPhotopath || '').split(',')" :key="item.value">
                <img :src="item" alt="" @click="clickImg($event)">
            </div>

            </div>
            <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc" />

        </div>
</template>

<script>
import bigImg from "@/components/common/bigImg.vue";

export default {
    props: ["formList"],
    data() {
        return {
            dept: null,
            deptList: [],
            showImg: false,
            imgSrc: ''
        };
    },
    components: {
        bigImg
    },
    mounted() {
        // formList.orderDept
        this.getSelOrderDept();
    },
    methods: {
        clickImg(e) {
            this.showImg = true;
            // 获取当前图片地址
            this.imgSrc = e.currentTarget.src;
        },
        viewImg() {
            this.showImg = false;
        },
        getSelOrderDept() {
            this.$api.ticket.list.selOrderDept().then(res => {
                if (res.success) {
                    this.deptList = res.data;
                    //   console.log(res.data);
                    /*console.log(this.formList.orderDept)
                              this.dept = res.data.filter(item => {
                                  return item.deptId == this.formList.orderDept;
                              })[0].name;*/
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.event {
  .title {
    padding-left: 10px;
    line-height: 20px;
    span {
      display: inline-block;
      margin-right: 10px;
      line-height: 20px;
    }
    i {
      line-height: 20px;
    }
    em {
      width: 0px;
      border-left: 1px solid black;
    }
  }
  .c-span2 {
    display: inline-block;
    word-wrap: break-word;
    word-break: normal;
    width: 100%;
  }
  .content {
    min-height: 0px;
    .col-md-1 {
      text-align: right;
      color: #7a797a;
    }
    .col-md-5 {
      color: #7a797a;
    }
  }
  .photo {
    padding: 30px;
    img {
      width: 90px;
      height: 90px;
      cursor: pointer;
    }
  }
}
</style>
